<template>
	<view>
		<header-safearea title="下单"></header-safearea>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/images/banner1.webp" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/images/banner2.webp" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/images/banner3.webp" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/images/banner4.webp" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="tab">
			<view class="left">
				<view class="text" @click="activeIndex = index" :class="index === activeIndex ? 'active': ''"
					v-for="(item, index) in tabData" :key="item.id">{{item.title}}</view>
			</view>
			<view class="right" v-if="tabData.length">
				<view class="list-item" v-for="(item, index) in tabData[activeIndex].children" :key="index">
					<image :src="item.image" mode=""></image>
					<view class="con">
						<view class="title">{{item.title}}</view>
						<view class="price">{{item.price}}</view>
						<view @click="list.push(item)">
							+
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<text>总价钱：{{allPrice}}</text>
			<button type="primary" size="mini" @click="toOrderList">选好了</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		request
	} from '../../utils/request.js'
	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	const tabData = ref([])
	const activeIndex = ref(0)
	const list = ref([])
	const allPrice = computed(() => {
		let price = 0;
		list.value.forEach(v => {
			price += v.price
		})

		return price.toFixed(2)
	})
	const getTabData = () => {
		request({
			url: 'http://localhost:3000/tab'
		}).then(resp => {
			tabData.value = resp.data
		})
	}
	const toOrderList = () => {
		uni.navigateTo({
			url: '/pages/orderList/orderList?list=' + JSON.stringify(list.value)
		})
	}
	getTabData()

	onPullDownRefresh(() => {
		getTabData()
	})
</script>

<style lang="scss">
	.swiper {
		height: 400rpx;
		position: sticky;
		top: 0;

		image {
			width: 100%;
			height: 400rpx;
		}
	}

	.tab {
		// background-color: red;
		height: 900rpx;
		display: flex;

		.left {
			width: 80px;
			overflow-y: scroll;
			border-right: 1px solid #ccc;

			.text {
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-left: 4px solid #fff;

				&.active {
					color: red;
					border-left: 4px solid red;
				}
			}
		}

		.right {
			flex: 1;
			overflow-y: scroll;

			.list-item {
				display: flex;

				image {
					width: 300rpx;
					height: 200rpx;
					flex-shrink: 0;
				}
			}
		}
	}
</style>